<template>
    <div class="pagination">
        <a href="javascript:;" :class="{disabled: currPage == 0}" @click="handlePage(-1)">上一页</a>
        <span>...</span>
        <a href="javascript:;" class="active">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;">6</a>
        <a href="javascript:;">7</a>
        <span>...</span>
        <a href="javascript:;"  :class="{disabled: currPage == props.params.pages}" @click="handlePage(1)">下一页</a>
    </div>
</template>
  <script>
export default {
    name: 'Pagination'
}
</script>
  <script setup>
import { ref } from 'vue';
const props = defineProps({
    params: {
        type: Object,
        default: () => { }
    }
})

const currPage = ref(0)
const handlePage = (val) => {
    currPage.value += val
    if (currPage.value < 1)
        currPage.value = 1
    else if (currPage.value >= props.params.pages)
        currPage.value = props.params.pages
}
</script>
<style scoped lang="scss">
.pagination {
    display: flex;
    justify-content: center;
    padding: 30px;

    >a {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;

        &:hover {
            color: $mainColor;
        }

        &.active {
            background: $mainColor;
            color: #fff;
            border-color: $mainColor;
        }

        &.disabled {
            cursor: not-allowed;
            opacity: 0.4;

            &:hover {
                color: #333
            }
        }
    }

    >span {
        margin-right: 10px;
    }
}
</style>